<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>等比例列表排列</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="../../public/res/css/g.css" media="all">
    <style>
        /* 这段样式只是用于演示 */
        #LAY-component-grid-list .demo-list .layui-card {
            height: 100%;
        }

        .outer {
            height: 100%;
            /* border: 1px solid silver; */
        }
    </style>
</head>

<body class="comBody">
    <div class="taxBoxBody flex overflow">
        <div class="taxTit">
            <ul>
                <li>时间范围：<span class="bd foc">2019-01-20</span> 至 <span class="bd foc">2019-03-22</span>
                </li>
                <li>
                    <div>
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="">
                                    <select name="city">
                                        <option value="">进项数据</option>
                                        <option value="0">进项数据0</option>
                                        <option value="1">进项数据1</option>
                                        <option value="2">进项数据2</option>
                                        <option value="3">进项数据3</option>
                                        <option value="4">进项数据4</option>
                                    </select>

                                </div>
                            </div>
                        </form>

                    </div>
                </li>
                <li>
                    <span class="bd foc">5465,5487,3142</span> 元
                </li>
            </ul>


        </div>
        <div class="taxBox">
            <div class="left">
                <div class="dbList">
                    <h2>对比行业<button class="layui-btn layui-btn-xs layui-btn-danger">设置</button></h2>
                    <ul>
                        <li>
                            <div>
                                <div class="layui-col-md1">
                                    <span class="dot bgRed" title="紧急">1</span>
                                </div>
                                <div class="layui-col-md9">
                                    【发票数量】申请发票数量超过同行业的20%
                                </div>
                                <div class="layui-col-md2">
                                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">查看</button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md1">
                                    <span class="dot bgBlue" title="紧急">1</span>
                                </div>
                                <div class="layui-col-md9">
                                    【发票数量】申请发票数量超过同行业的20%
                                </div>
                                <div class="layui-col-md2">
                                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">查看</button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md1">
                                    <span class="dot bgGreen" title="紧急">1</span>
                                </div>
                                <div class="layui-col-md9">
                                    【发票数量】申请发票数量超过同行业的20%
                                </div>
                                <div class="layui-col-md2">
                                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">查看</button>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="dbList">
                    <h2>对比自身<button class="layui-btn layui-btn-xs layui-btn-danger">设置</button></h2>
                    <ul>
                        <li>
                            <div>
                                <div class="layui-col-md1">
                                    <span class="dot bgRed" title="紧急">1</span>
                                </div>
                                <div class="layui-col-md9">
                                    【发票数量】申请发票数量超过同行业的20%
                                </div>
                                <div class="layui-col-md2">
                                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">查看</button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md1">
                                    <span class="dot bgBlue" title="紧急">1</span>
                                </div>
                                <div class="layui-col-md9">
                                    【发票数量】申请发票数量超过同行业的20%
                                </div>
                                <div class="layui-col-md2">
                                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">查看</button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="layui-col-md1">
                                    <span class="dot bgGreen" title="紧急">1</span>
                                </div>
                                <div class="layui-col-md9">
                                    【发票数量】申请发票数量超过同行业的20%
                                </div>
                                <div class="layui-col-md2">
                                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">查看</button>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="ecBoxList">
                    <div class="ecBox2 flex overflow">
                        <div class="layui-card flex item">
                            <div class="layui-card-header">对比图</div>
                            <div class="layui-card-body flex item">
                                <div style="height:540px;overflow: hidden;" id="mapdemo"></div>
                            </div>
                        </div>
                    </div>
                    <div class="ecBox flex overflow">
                        <div class="layui-card flex item">
                            <div class="layui-card-header">横琴xxx科技服务有限公司</div>
                            <div class="layui-card-body flex item">
                                <div class="flex item" id="a3b"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'tax', 'form', 'echarts'], function () {
            var opt = layui.tax;
            var a3b = echarts.init(document.getElementById('a3b'));
            if (a3b) {
                a3b.setOption(opt[5]);
            }
        });
    </script>
    <script src="js/echarts.js"></script>
    <script src="js/bmap.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0UqXGL98FSmi22w2Rl6HK56I"></script>
    <script src="js/mapdemo.js"></script>

</body>

</html>